<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>软键盘</title>
		<link rel="stylesheet" type="text/css" href="css/rkey.css"/>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			input[type='text']{
				padding: 6px 10px;
				color: #777;
				outline: none;
				border: 1px #bbb solid;
				margin: 5px;
			}
			input[type='text']:focus{
				border-color: #999;
			}
			#btnEnter{
				padding: 5px 10px;
				background-color: #fff;
				border: 1px #e5e5e5 solid;
				outline: none;
				vertical-align: middle;
				position: static;
			}
		</style>
	</head>
	<body>
		<input id="txtNum" type="text" style="margin-left: 40px;" />
		<input id="btnEnter" type="button" value="确 定" />
		<div id="keyBox">
			<div id="keyTop">
				<button id="close">X</button>
			</div>
			<div class="key-bg"></div>
			<table id="keyboard" width="340">
				<tr>
					<td> <input id="Button1" type="button" value="1" onclick="return btnNum_onclick(1)" /></td>
					<td> <input id="Button2" type="button" value="2" onclick="return btnNum_onclick(2)" /></td>
					<td> <input id="Button3" type="button" value="3" onclick="return btnNum_onclick(3)" /></td>
					<td rowspan="3"> <input id="ButtonDel" type="button" value="删除" onclick="return delText()" /></td>
				</tr>
				<tr>
					<td> <input id="Button4" type="button" value="4" onclick="return btnNum_onclick(4)" /></td>
					<td> <input id="Button5" type="button" value="5" onclick="return btnNum_onclick(5)" /></td>
					<td> <input id="Button6" type="button" value="6" onclick="return btnNum_onclick(6)" /></td>
				</tr>
				<tr>
					<td><input id="Button7" type="button" value="7" onclick="return btnNum_onclick(7)" /></td>
					<td><input id="Button8" type="button" value="8" onclick="return btnNum_onclick(8)" /></td>
					<td><input id="Button9" type="button" value="9" onclick="return btnNum_onclick(9)" /></td>
				</tr>
				<tr>
					<td><input id="Button0" type="button" value="0" onclick="return btnNum_onclick(0, event)" /></td>
					<td><input id="Buttonx" type="button" value="x" onclick="return btnNum_onclick('X')" /></td>
					<td colspan="2"><input id="ButtonClear" type="button" value="清空" onclick="return clearText()" /></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript" src="js/eventUtil.js" ></script>
		<script language="javascript" type="text/javascript">
			function btnEnter_onclick() {
				var value = document.getElementById("txtNum").value;
				alert(value);
			}

			function btnNum_onclick(i) {
				txtNum.value = txtNum.value + i;
			}

			function clearText() {
				document.getElementById("txtNum").value = "";
			}

			function delText() {
				var value = document.getElementById("txtNum").value;
				var str = value.substring(0, value.length - 1);
				document.getElementById("txtNum").value = str;
			}
			window.onload = function() {  
		        //获取元素
	            var oBox = document.getElementById("keyBox");
	            //定义开关
	            var bool = false;
	            //获取元素的宽高
	            var bWidth = oBox.clientWidth;
	            var bHeight = oBox.clientHeight;
	            //定义变量
	            var bx,by,mx,my;
	            var down = 'touchstart' in document ? 'touchstart':'mousedown';
	            var move = 'touchmove' in document ? 'touchmove':'mousemove';
	            var touchend = 'touchend' in document ? 'touchend':'mouseup';
	            alert(down);
	            EventUtil.addHandler(oBox, 'touchstart', function(e){
	            	var oEvent = EventUtil.getEvent(e);
	                //当鼠标在元素上按下时，打开开关
	                bool = true;
	                //获取按下鼠标时元素的位置和鼠标的位置
	                bx = getElementLeft(oBox).actualLeft;
	                by = getElementLeft(oBox).actualTop;
	                mx = getMousePos(oEvent).pageX;
	                my = getMousePos(oEvent).pageY;
	            });
	            EventUtil.addHandler(oBox, 'touchmove', function(e){
	            	var oEvent = e || window.e;
	                //获取窗口的宽高
	                var wWidth = document.documentElement.clientWidth;
	                var wHeight = document.documentElement.clientHeight;
	                //判断鼠标是否被按下
	                if (bool) {
	                    //获取鼠标移动的距离
	                    var x = oEvent.changedTouches[0].clientX - mx + bx;
	                    var y = oEvent.changedTouches[0].clientY - my + by;
	                    //判断边界
	                    x <= 0?x = 0:(x>=wWidth-bWidth?x = wWidth-bWidth:x);
	                    y <=0?y = 0:(y>=wHeight-bHeight?y = wHeight-bHeight:y);
	                    //元素定位
	                    oBox.style.left = x+"px";
	                    oBox.style.top = y+"px";
	                }
	            });
	            document.addEventListener(touchend, function(){
	                //松开鼠标，关闭开关
	                bool = false;
	            });
	            var $input = document.getElementById('txtNum');
	            var close = document.getElementById('close');
	            var keyboard = document.getElementById('keyboard');
	            $input.addEventListener('focus', function(){
	            	var left = getBoundingClientRect($input).left;
	            	var top = getBoundingClientRect($input).top+45;
	            	oBox.style.cssText = 'display: block;top: '+top+'px;left:'+left+'px';
	            });
	            close.addEventListener('click', function(){
	            	oBox.style.display = 'none';
	            });
	            keyboard.addEventListener('touchmove', function(event){
	            	event.stopPropagation();
	            });
		    }
		</script>
	</body>
</html>